<template>
  <view v-if="!isLoading">
    <view class="lists" v-if="!isEmpty">
      <view v-for="(item,index) in lists" class="item">
        <image class="bg" mode="heightFix" :src="$xyfun.image('/static/other/boy.png')" v-if="item.sex=='男'"></image>
        <image class="bg" mode="heightFix" :src="$xyfun.image('/static/other/girl.png')" v-else></image>
        <image class="avatar-100" :src="$xyfun.image(item.avatar)"></image>
        <view class="userinfo">
          <view class="nickname">
            {{item.username}}
            <text class="yz-iconfont yz-xingbie-nan" v-if="item.sex=='男'"></text>
            <text class="yz-iconfont yz-xingbie-nv" v-else></text>
          </view>
          <view class="tags">
            <view>{{item.grade_text}}</view>
            <view>{{item.subject_text}}</view>
          </view>
          <view class="mobile" @tap="call(item.mobile)">电话：{{item.mobile}} <text class="yz-iconfont yz-dianhua"></text></view>
          <view class="addr">详细地址：{{item.addr}}</view>
          <view class="state">学生基本情况：{{item.state}}</view>
        </view>
      </view>
    </view>
    <view v-else>
      <xy-empty text="暂无数据" />
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyEmpty from '@/components/xy-empty';
import teacherRow from "@/components/teacher/row.vue"
export default {
  components: {
    xyEmpty,
    teacherRow
  },
  data() {
    return {
      isLoading:true,
      isEmpty: true,
      lists: [],
      currentPage: 1,
      lastPage: 1,
    }
  },
  computed: {
    ...mapState(['common'])
  },
  async onLoad(options) {
    this.loadData();
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.lists = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    async loadData(){

      this.$api.postBase({
        url: '/teacher/my_student',
        loadingTip:'加载中...',
        data: {
          page: this.currentPage,
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.isLoading = false;
          this.lists = [...this.lists, ...res.data];
          this.isEmpty = !this.lists.length;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
        }
      });
    },

    call(mobile){
      uni.makePhoneCall({
        phoneNumber : mobile,
      })
    }

  }
}
</script>

<style scoped lang="scss">
.lists{
  padding: 20rpx;
  .item{
    background: #fffaf3;
    display: flex;
    margin-bottom: 20rpx;
    border-radius: 15rpx;
    padding: 20rpx;
    position: relative;
    overflow: hidden;
    &:nth-of-type(2n){
      background: #fff6f6;
    }
    .bg{
      position: absolute;
      right: -50rpx;
      top: 40rpx;
      opacity: 0.1;
      height: 300rpx;
    }
    .nickname{
      font-size: 30rpx;
      margin-bottom: 20rpx;
      .yz-iconfont{
        margin-left: 10rpx;
        font-size: 34rpx;
      }
      .yz-xingbie-nv{
        color: #fca8ae;
      }
      .yz-xingbie-nan{
        color: $uni-color-primary;
      }
    }
    .userinfo{
      font-size: 24rpx;
      margin-left: 20rpx;
      width: 1rpx;
      flex-grow: 1;
    }
    .tags{
      display: flex;
      margin-bottom: 30rpx;
      view{
        background: $uni-color-warning;
        margin-right: 20rpx;
        color: #fff;
        padding: 5rpx 20rpx;
        border-radius: 14rpx;
        font-size: 20rpx;
        &:nth-of-type(2){
          background: $uni-color-primary;
        }
      }
    }
    .mobile{
      margin-left: -110rpx;
      margin-bottom: 10rpx;
      color: grey;
      font-size: 32rpx;
      text{
        color: $uni-color-warning;
        font-size: 34rpx;
        margin-left: 20rpx;
      }
    }
    .addr{
      margin-left: -110rpx;
      margin-bottom: 10rpx;
      color: grey;
    }
    .state{
      margin-left: -110rpx;
      margin-bottom: 10rpx;
      color: grey;
    }
  }
}
</style>